<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>搜索关键词分析</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">

</head>
<body>
  <div id="app">
    <div class="filter-container">
        <el-form :inline="true" >
            <el-form-item label="关键词">
              <el-select v-model="searchVector"
                     placeholder="请输入关键词"
                     filterable
                     remote
                    :remote-method="remoteMethod"
                    :loading="loading" @change="handleSearch"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.word"
                  :value="item.vectors">
                </el-option>
            </el-select>
            </el-form-item>
        </el-form>
    </div>

    <div ref="main" style="width: 100%;height:600px;"></div>

    <el-table :data="list" border stripe fit highlight-current-row>
      <el-table-column align="center" label='关键词' >
        <template slot-scope="scope">
          {{scope.row.word }}
        </template>
      </el-table-column>
      <el-table-column align="center" label='搜索次数' >
        <template slot-scope="scope">
          {{scope.row.count }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.0/jquery.min.js">
  </script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
            searchVector: undefined,
            loading: false,
            loadingVec: false,
            options: [],
            list:[],
            myChart: undefined
        }
      },
      mounted() {
          var dom = this.$refs['main'];
          console.log("dom:", dom);
          this.myChart = echarts.init(dom);
              // 指定图表的配置项和数据
            var option = {
                color: [
                    '#dd4444'
                ],
                xAxis: {
                    scale: true
                },
                yAxis: {
                    scale: true
                },
                visualMap: [
                    {
                        left: 'right',
                        top: '10%',
                        dimension: 3,
                        min: 0,
                        max: 1000,
                        itemHeight: 120,
                        precision: 0.1,
                        calculable: true,
                        text: ['搜索次数'],
                        textGap: 30,
                        textStyle: {
                            color: '#000'
                        },
                        inRange: {
                            colorLightness: [1, 0.5]
                        },
                        outOfRange: {
                            color: ['rgba(255,255,255,.2)']
                        },
                        controller: {
                            inRange: {
                                color: ['#c23531']
                            },
                            outOfRange: {
                                color: ['#444']
                            }
                        }
                    }
                ],
                dataZoom: [{
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0]
                },
                {
                    type: 'inside',
                    show: true,
                    yAxisIndex: [0]
                },
                {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0]
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: [0]
                }],
                series: [{
                    data: [
                    ],
                    type: 'scatter',
                    symbolSize: function (data) {
                        //return data[3];
                        return 20;
                    },
                    itemStyle: {
                        normal: {
                          label:{
                            show: true,
                            formatter: param => {
                              return param.data[2];
                            },
                            position: 'top'
                          },
                        }
                    },
                    animation: true,

                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(option);
      },
      methods: {
          handleSearch(vectors) {
            this.loadingVec = true;
            var thiz = this;
            $.getJSON("/find_similar?v="+vectors, function(res){
                thiz.list = res;
                var myChartData = [];
                var minValue = undefined;
                var maxValue = undefined;
                for (var i=0; i<res.length; i++) {
                    var item = res[i];
                    var value = item.count;
                    if (minValue===undefined) {
                        minValue = value;
                    } else if (minValue > value) {
                        minValue = value;
                    }
                    if (maxValue===undefined) {
                        maxValue = value;
                    } else if (maxValue < value) {
                        maxValue = value;
                    }
                }
                var currScala = 1;
                var scalaMinValue = minValue;
                while (scalaMinValue < 1) {
                    currScala *= 10;
                    scalaMinValue = minValue * currScala;
                }
                minValue *= currScala;
                maxValue *= currScala;
                console.log("scala:", currScala);

                for (var i=0; i<res.length; i++) {
                    var item = res[i];
                    var value = item.count*currScala;
                    myChartData.push(item.vectors.concat([item.word, value]));
                }
                console.log("minValue,maxValue:",minValue,maxValue);
                console.log("myChartData", myChartData);
                thiz.myChart.setOption({
                  series: [{
                    // 根据名字对应到相应的数据
                    data : myChartData
                  }],
                    visualMap:[{
                          min: minValue,
                          max: maxValue,
                    }]
                });
                thiz.loadingVec = false;
            });
          },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                var thiz = this;
                $.getJSON("/search_word?q="+query, function(res){
                    thiz.options = res;
                    thiz.loading = false;
                })
            }
        }
      }
    })
  </script>
</html>